<template>
  <div>
    <a-page-header
      style="border: 1px solid rgb(235, 237, 240)"
      title="关键字搜索编辑"
      :ghost="false"
      @back="() => $router.go(-1)"
    ></a-page-header>

    <page-header-wrapper>
      <a-card :bordered="false">
        <a-alert v-if="reject_reason" :message="reject_reason" banner style="margin-bottom:20px;" />

        <a-form-model
          ref="alipayForm"
          :model="alipayForm"
          :rules="alipayRules"
          :label-col="{ span: 3 }"
          :wrapper-col="{ span: 11 }"
        >
          <a-form-model-item label="小程序" prop="id">
            <a-select placeholder="请选择小程序" :disabled="disabled" v-model="alipayForm.id">
              <a-select-option :value="item.id" v-for="item of idList" :key="item.id">
                {{ item.app_name }}
              </a-select-option>
            </a-select>
          </a-form-model-item>

          <a-form-model-item label="关键字" required>
            <div class="flexBox" v-for="(item, i) of alipayForm.key_words" :key="i">
              <div class="inp">
                <a-input v-model="item.value" placeholder="请填写关键字" :disabled="disabled" allowClear />
              </div>
              <a-button class="btn" type="primary" @click="handle('add')" v-if="!i && alipayForm.key_words.length < 5"
                >添加</a-button
              >
              <a-button class="btn" type="danger" @click="handle('remove', i)" v-if="!i">删除</a-button>
            </div>
          </a-form-model-item>

          <a-form-model-item label="服务描述" prop="descprise">
            <a-textarea placeholder="请填写服务描述" :disabled="disabled" allow-clear v-model="alipayForm.descprise" />
          </a-form-model-item>

          <a-form-model-item label="是否可见" prop="can_search">
            <a-switch v-model="alipayForm.can_search" :disabled="disabled" />
          </a-form-model-item>

          <a-form-model-item :wrapper-col="{ span: 14, offset: 4 }">
            <a-button v-loading="btnLoading" :disabled="disabled" type="primary" @click="onSubmit"> 提交 </a-button>
            <a-button style="margin-left: 10px" @click="$router.go(-1)"> 取消 </a-button>
          </a-form-model-item>
        </a-form-model>
      </a-card>
    </page-header-wrapper>
  </div>
</template>

<script>
import { searchBaseorderModify, searchOrderdetail } from '@/api/marketing/alipayPromotion'
import { alipayList } from '@/api/setting/applet'
export default {
  data() {
    return {
      btnLoading: false,
      disabled: false,
      data: null,

      idList: [],
      categoryList: [],
      alipayForm: {
        id: '',
        biz_type: 'SEARCH_ORDER_CREATE',
        opt_type: 'set',
        descprise: '',
        key_words: [
          {
            value: ''
          }
        ],
        can_search: true
      },

      reject_reason: '',

      // 支付宝验证规则
      alipayRules: {
        id: [{ required: true, message: '请先选择小程序', trigger: 'change' }],
        can_search: [{ required: true, message: '请选择是否可见', trigger: 'change' }],
        descprise: [{ required: true, message: '请填写服务描述', trigger: 'blur' }]
      }
    }
  },

  methods: {
    handle(type, index) {
      switch (type) {
        case 'add':
          this.alipayForm.key_words.push({
            value: ''
          })
          break

        case 'remove':
          this.alipayForm.key_words.splice(index, 1)
          break
      }
    },

    // 点击提交
    onSubmit() {
      this.$refs.alipayForm.validate(async valid => {
        if (valid) {
          let alipayForm = JSON.parse(JSON.stringify(this.alipayForm))

          if (!alipayForm.key_words.every(el => el.value)) {
            this.$message.error('关键字不能为空~')
            return
          }

          alipayForm.key_words = alipayForm.key_words.map(el => el.value)

          this.btnLoading = true
          const res = await searchBaseorderModify(alipayForm)
          this.btnLoading = false

          if (!res.code) {
            this.$message.success(res.msg)
            this.$router.back()
            return
          }

          this.$message.error(res.msg)
        } else {
          return false
        }
      })
    }
  },

  async mounted() {
    const hide = this.$message.loading('请稍等', 0)
    let res = await alipayList()

    if (!res.code && res.data.length) {
      this.idList = res.data
    }

    if (this.$route.query.apply_id) {
      let { apply_id, id } = this.$route.query
      // this.disabled = true
      this.alipayForm.id = id

      let detail = await searchOrderdetail({
        id,
        apply_id
      })
      if (!detail.code) {
        let data = detail.data.data
        this.reject_reason = data.reject_reason

        let detail_base_items = data.detail_base_items,
          keyWords = detail_base_items ? detail_base_items.key_word : ''

        this.alipayForm = {
          id,
          biz_type: 'SEARCH_ORDER_CREATE',
          opt_type: 'set',
          descprise: data.describe,
          key_words: keyWords.split(',').map(el => {
            return {
              value: el
            }
          }),
          can_search: detail_base_items.can_search === 'true' ? true : false
        }
      } else {
        this.$message.error(detail.msg)
      }
    }

    hide()
  }
}
</script>

<style lang="less" scoped>
.flexBox {
  display: flex;
  align-items: center;
  margin-bottom: 20px;

  &:last-of-type {
    margin-bottom: 0;
  }

  .inp {
    flex: 1;
  }

  .btn {
    margin-left: 10px;
  }
}
</style>
